<template>
    <section class="container">
        <div class="center-box">
            <div class="recommend-category-box">
                <ul class="clear-fix">
                    <li
                            :class="item.favorites_id !== currentFavoriteId ? 'float-left' : 'float-left recommend-menu-active'"
                            v-for="(item, index) in categories"
                            :key="index" @click="onCategoryItemClick(item)">
                        {{item.favorites_title}}
                    </li>

                    <li class="float_right">
                        <a href="#top">
                            <span class="back_top el-icon-upload2"></span>
                        </a>
                    </li>
                </ul>
            </div>

            <div id="recommend_content_list_box" v-loading="loading">
                <div class="recommend-content-title">
                    <span v-html="currentCategory"></span>
                </div>
                <div class="recommend-content-list clear-fix">

                    <div class="recommend-content-item float-left"
                         v-for="(item, index) in content.tbk_uatm_favorites_item_get_response.results.uatm_tbk_item"
                         :key="index">
                        <div class="recommend_item_cover">
                            <img :src="item.pict_url + '_240x240xzq90.jpg_.webp'" alt="none">
                        </div>

                        <div class="recommend_item_title">
                            <a v-text="item.title"
                               :href="item.coupon_click_url!==null?item.coupon_click_url:item.click_url"
                               target="_blank"></a>
                        </div>

                        <div class="recommend_item_info">

                            <a class="buy-btn" v-if="item.coupon_click_url!==null" :href="item.coupon_click_url"
                               target="_blank">领券购买</a>

                            <span v-text="item.coupon_click_url===null?'没有优惠劵了':'原价：' + item.zk_final_price"
                                  class="recommend_original_price">原价：34.00元</span>
                        </div>

                        <span class="recommend-coupon-info" v-if="item.coupon_info!==null"
                              v-text="item.coupon_info"></span>

                    </div>

                </div>
            </div>
        </div>
    </section>
</template>

<script>
    import presenter from "../utils/api";

    export default {

        data() {
            return {
                loading: false
            }
        },
        methods: {
            onCategoryItemClick(item) {

                // console.log(item.favorites_id);
                // console.log(item.favorites_title);

                // 修改界面数据 or state（adapter)

                document.documentElement.scrollTop = 0;

                this.currentFavoriteId = item.favorites_id;
                this.currentCategory = item.favorites_title.split('').join("<em>/</em>");

                this.loadContentByCategory(item.favorites_id);

            },
            loadContentByCategory(favoriteId) {

                // change state
                this.loading = true;

                // clear data
                this.content.tbk_uatm_favorites_item_get_response.results.uatm_tbk_item.length = 0;
                this.content.tbk_uatm_favorites_item_get_response.results.uatm_tbk_item = [];

                presenter.getRecommendContent(favoriteId).then(result => {
                    console.log(result);

                    if (result.code === 10000) {
                        this.content = result.data;
                    } else {
                        //
                    }

                    this.loading = false;
                })
            },
            onScroll() {

                let menuBox = document.getElementsByClassName("recommend-category-box");

                console.log(menuBox.length);

                if (menuBox) {
                    let dy = document.documentElement.scrollTop;

                    if (dy < 90) {
                        menuBox[0].style.top = (90 - dy) + 'px';
                    } else {
                        menuBox[0].style.top = '0px';
                    }
                }
            }
        },
        mounted() {
            this.$store.commit('setCurrentActive', 'index');

            this.onScroll();

            // init variable
            let listbox = document.getElementById("recommend_content_list_box");

            if (listbox) {
                listbox.style.minHeight = document.documentElement.clientHeight + "px";
            }


            // init Listener
            window.addEventListener("scroll", this.onScroll);


            // init view
        },
        async asyncData() {

            let categoryResult = await presenter.getRecommendCategories();

            if (categoryResult.code === 10000) {
                // success
                let favoritesId = categoryResult.data[0].favorites_id;

                let categoriesContent = await presenter.getRecommendContent(favoritesId);

                let titleArray = categoryResult.data[0].favorites_title.split('');

                if (categoriesContent.code === presenter.SUCCESS_CODE) {
                    return {
                        categories: categoryResult.data,
                        content: categoriesContent.data,
                        currentCategory: titleArray.join("<em>/</em>"),
                        currentFavoriteId: favoritesId
                    };
                } else {

                }
            } else {
                // failure
            }
        }
    }
</script>

<style>
    .container {

    }

    .recommend-category-box ul {
        list-style: none;
    }

    .recommend-category-box ul > li:hover {
        border-bottom: #c9302c 2px solid;
        color: #c9302c;
    }

    .recommend-category-box {
        background: white;
        height: 60px;
        line-height: 58px;
        box-shadow: 0 5px 10px #d4d4d4;
        margin-bottom: 30px;
        position: fixed;
        z-index: 1000;
        width: 1140px;
    }

    .recommend-category-box li {
        font-size: 16px;
        margin-left: 20px;
        margin-right: 20px;
        color: #8c8c8c;
        cursor: pointer;
    }

    .recommend-menu-active {
        border-bottom: red 2px solid;
        color: red !important;
    }


    .recommend-content-item {
        position: relative;
        width: 265px;
        height: 370px;
        background: white;
        box-shadow: 0 5px 10px #d4d4d4;
        padding: 10px 10px;
        margin: 10px;
    }

    .recommend_item_cover img {
        width: 243px;
        height: 243px;
    }

    .recommend_item_title a {
        text-decoration: none;
        color: black;
        margin: 10px 0;
        -webkit-line-clamp: 2;
        overflow: hidden;
        -webkit-box-orient: vertical;
        display: -webkit-box;
    }


    .recommend_original_price {
        margin-left: 10px;
        font-weight: 600;
        color: #ebb563;
    }

    .buy-btn {
        text-decoration: none;
        display: inline-block;
        line-height: 1;
        white-space: nowrap;
        cursor: pointer;
        background: #F56C6C;
        border: 1px solid #F56C6C;
        color: white;
        -webkit-appearance: none;
        text-align: center;
        box-sizing: border-box;
        outline: 0;
        margin: 0;
        transition: .1s;
        font-weight: 500;
        padding: 12px 20px;
        font-size: 14px;
        border-radius: 4px;
    }

    #recommend_content_list_box {
        margin-top: 80px;
        box-shadow: 0 5px 10px #d4d4d4;
    }

    .recommend-coupon-info {
        position: absolute;
        right: 0;
        top: 10px;
        padding: 5px 10px;
        background: #c9302c;
        color: white;
        border-radius: 5px;
    }

    .recommend-content-title em {
        margin-left: 5px;
        margin-right: 5px;
        font-weight: 400;
        font-size: 16px;
    }

    .recommend-content-title span {
        font-size: 20px;
        font-weight: 600;
        color: #4d555d;
        font-style: normal;
        margin: 0 3px;
    }

    .recommend-content-title {
        text-align: center;
    }

    .float_right {
        float: right;
    }

    .back_top {
        height: 30px;
        width: 30px;
        border: #8c8c8c 1px solid;
        text-align: center;
        line-height: 30px;
        margin-top: 15px;
        margin-bottom: 15px;
        border-radius: 50%;
        font-weight: 600;
    }

    .back_top:hover {
        color: #c9302c;
        border: #c9302c 1px solid;
    }
</style>
